<!-- Copyright (c) 2019-2020 十三 all rights reserved. -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="header::head-fragment('易购商城-搜索','search')">
</head>
<!--<link rel="stylesheet" th:href="@{css/search.css}">-->
<body>
<header th:replace="header::header-fragment"></header>
<!-- nav -->
<nav th:replace="header::nav-fragment"></nav>

<!--分类筛选-->
<div class="classify">
    <div class="category">
        <div class="category_bar">
            <th:block th:if="${searchPageCategoryVO!=null}">
                <div class="fm c">
                    <a href="##" class="qqq" th:text="${searchPageCategoryVO.secondLevelCategoryName}">egomall</a>
                    <div>
                        <th:block th:each="thirdLevelCategory : ${searchPageCategoryVO.thirdLevelCategoryList}">
                            <a th:href="@{${'/search?goodsCategoryId='+thirdLevelCategory.categoryId}}"
                               th:text="${thirdLevelCategory.categoryName}">egomall</a>
                        </th:block>
                    </div>
                </div>
                <i><img src="image/right-@1x.png" alt=""></i>
                <div class="findword">"
                    <th:block th:text="${searchPageCategoryVO.currentCategoryName}"></th:block>
                    "
                </div>
            </th:block>
            <th:block th:if="${searchPageCategoryVO==null}">
                <th:block th:if="${keyword!=null and keyword !=''}">
                    <div class="findword">搜索 "
                        <th:block th:text="${keyword}"></th:block>
                        "
                    </div>
                </th:block>
            </th:block>
        </div>
    </div>
</div>
<div class="EG_banner w">
    <div class="EG_nav">
        <div class="EG_selector">
            <!--手机商品筛选-->
            <div class="title" th:if="${result != null}" th:each="category : ${result.getCategoryVos}">
                <h3><b th:text="${category.categoryName}"></b><em>商品筛选</em></h3>
                <div class="st-ext">共&nbsp;<span th:text="${result.total}"></span>个商品</div>
                <div class="st-ext">
                    <a th:each="nav : ${result.navs}" th:href="${nav.url}">
                        <span th:text="${nav.navName}"></span>：
                        <span th:text="${nav.navValue}"></span>×
                    </a>
                </div>
            </div>
            <div th:with="brandId = ${param.brandId}" class="EG_nav_logo">
                <!-- 品牌 -->
                <div th:if="${#strings.isEmpty(brandId)}" class="EG_nav_wrap">
                    <div class="sl_key">
                        <span><b>品牌：</b></span>
                    </div>
                    <div class="sl_value">
                        <div class="sl_value_logo">
                            <ul>
                                <li th:each="brand:${result.getBrandVos}">
                                    <a th:href="${'javascript:searchProducts(&quot;brandId&quot;, ' + brand.brandId + ')'}">
                                        <img th:src="${brand.brandImg}" alt="">
                                        <div th:text="${brand.brandName}">
                                            华为(HUAWEI)
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--<div class="sl_ext">-->
                    <!--    <a href="#">-->
                    <!--        更多-->
                    <!--        <i style='background: url(image/searchele.png)no-repeat 3px 7px'></i>-->
                    <!--        <b style='background: url(image/searchele.png)no-repeat 3px -44px'></b>-->
                    <!--    </a>-->
                    <!--    <a href="#">-->
                    <!--        多选-->
                    <!--        <i>+</i>-->
                    <!--        <span>+</span>-->
                    <!--    </a>-->
                    <!--</div>-->
                </div>
                <!--分类-->
                <div class="EG_pre">
                    <div class="sl_key">
                        <span><b>分类：</b></span>
                    </div>
                    <div class="sl_value">
                        <ul th:if="${result.getCategoryVos != null}">
                            <li th:each="category:${result.getCategoryVos}">
                                <a th:href="${'javascript:searchProducts(&quot;categoryId&quot;, '+ category.categoryId + ')'}"
                                   th:text="${category.categoryName}"></a>
                            </li>
                        </ul>
                    </div>
                    <!--<div class="sl_ext">-->
                    <!--    <a href="#">-->
                    <!--        更多-->
                    <!--        <i style='background: url(image/searchele.png)no-repeat 3px 7px'></i>-->
                    <!--        <b style='background: url(image/searchele.png)no-repeat 3px -44px'></b>-->
                    <!--    </a>-->
                    <!--    <a href="#">-->
                    <!--        多选-->
                    <!--        <i>+</i>-->
                    <!--        <span>+</span>-->
                    <!--    </a>-->
                    <!--</div>-->
                </div>

                <!--其他所有需要展示的属性-->
                <div class="EG_pre" th:each="attr:${result.getAttrVos}" th:if="${!#lists.contains(result.selectedAttr, attr.attrId)}">
                    <div class="sl_key">
                        <span th:text="${attr.attrName}">屏幕尺寸：</span>
                    </div>
                    <div class="sl_value">
                        <ul>
                            <li th:each="val:${attr.getAttrValues}">
                                <a th:href="${'javascript:searchProducts(&quot;attrs&quot;,&quot;' + attr.attrId + '_' + val + '&quot;)'}"
                                   th:text="${val}">属性值</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="EG_show">
                <a href="#">
                    <span>
                        更多选项（ CPU核数、网络、机身颜色 等）
                    </span>
                </a>
            </div>
        </div>
    </div>
</div>

<!--排序-->
<div class="sort">
    <div class="list" th:with="p = ${param.sort}, range = ${param.skuPrice}">
        <a th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p, 'hotScore') && #strings.endsWith(p, 'desc')) ? 'sort_a desc' : 'sort_a'}"
           th:attr="style=${(#strings.isEmpty(p) || #strings.startsWith(p, 'hotScore')) ? 'color: #1baeae' : 'color: #000000'}"
           sort="hotScore">
            <div>综合排序[[${(!#strings.isEmpty(p) && #strings.startsWith(p, 'hotScore') && #strings.endsWith(p, 'desc')) ? '↓': '↑'}]]</div>
        </a>
        <a th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p, 'saleCount') && #strings.endsWith(p, 'desc')) ? 'sort_a desc' : 'sort_a'}"
           th:attr="style=${(!#strings.isEmpty(p) && #strings.startsWith(p, 'saleCount')) ? 'color: #1baeae' : 'color: #000000'}"
           sort="saleCount">
            <div>销量[[${(!#strings.isEmpty(p) && #strings.startsWith(p, 'saleCount') && #strings.endsWith(p, 'desc')) ? '↓': '↑'}]]</div>
        </a>
        <a th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p, 'skuPrice') && #strings.endsWith(p, 'desc')) ? 'sort_a desc' : 'sort_a'}"
           th:attr="style=${(!#strings.isEmpty(p) && #strings.startsWith(p, 'skuPrice')) ? 'color: #1baeae' : 'color: #000000'}"
           sort="skuPrice">
                <div>价格[[${(!#strings.isEmpty(p) && #strings.startsWith(p, 'skuPrice') && #strings.endsWith(p, 'desc')) ? '↓': '↑'}]]</div>
        </a>
        <label>
            <input id="priceFrom" type="number" style="width: 100px;margin-left: 30px" th:value="${#strings.isEmpty(range) ? '' : #strings.substringBefore(range, '_')}">
        </label>
            &nbsp;-&nbsp;
        <label>
            <input id="priceTo" type="number" style="width: 100px;" th:value="${#strings.isEmpty(range) ? '' : #strings.substringAfter(range, '_')}">
        </label>
        <button id="rangeBtn" style="margin-left: 10px;">确认</button>
        <li>
            <a th:with="check = ${param.hasStock}">
                <label>
                    <input id="hasStock" type="checkbox" th:checked="${#strings.equals(check, '1')}">
                    仅显示有货
                </label>
            </a>
        </li>
    </div>
</div>

<div class="goods_item center">
    <div class="main center">
        <th:block th:if="${#lists.isEmpty(result.getSkus())}">
            <img style="margin-top: 16px;padding: 16px 20px;" th:src="@{/image/null-content.png}">
        </th:block>
        <th:block th:unless="${#lists.isEmpty(result.getSkus())}">
            <th:block th:each="sku : ${result.getSkus()}">
                <div class="item_card_frame">
                    <div class="item_card"><a th:href="|http://egomall.shop:8006/skuId=${sku.skuId}.html|" target="_blank">
                        <img th:src="@{${sku.skuImg}}"></a></div>
                    <div class="item_brand"><a th:href="|http://egomall.shop:8006/skuId=${sku.skuId}.html|" target="_blank"
                                               th:utext="${sku.skuTitle}">标题</a></div>
                    <!-- 商品描述 -->
                    <!--<div class="item_sub_intro" th:utext="${sku.skuTitle}">商品介绍</div>-->
                    <div class="item_price" th:text="${sku.skuPrice+'.00元'}">价格</div>
                </div>
            </th:block>
        </th:block>
        <div class="clear"></div>
    </div>
    <!-- 分页 -->
    <div class="pages">
        <div class="page_wrap">
            <th:block th:if="${null != result and !#lists.isEmpty(result.getSkus())}">
                <span class="page_span1">
                    <a class="page_a" style="cursor:pointer"  th:if="${result.pageNum > 1}" th:attr="pn=${result.pageNum - 1}">
                         <div>< 上一页</div>
                    </a>
                    <a class="page_a" style="cursor:pointer"
                       th:attr="pn=${pageNav}, style=${pageNav == result.pageNum ? 'border: 0;color:#1baeae;background: #fff' : ''}"
                       th:each="pageNav : ${result.pageNavs}">[[${pageNav}]]</a>
                    <a class="page_a" style="cursor:pointer"  th:if="${result.pageNum < result.totalPage}"
                       th:attr="pn=${result.pageNum + 1}" >
                        <div>下一页 ></div>
                    </a>
                </span>
                <span class="page_span2" th:with="curPage = ${param.pageNum}">
                    <em>共<b>[[${result.totalPage}]]</b>页&nbsp;&nbsp;到第</em>
                    <input id="toPage" type="number" th:value="${!#strings.isEmpty(curPage) ? curPage : 1}">
                    <em>页</em>
                    <a class="page_submit">确定</a>
                </span>
            </th:block>
        </div>
    </div>
</div>

<div th:replace="footer::footer-fragment"></div>
<!-- jQuery -->
<script th:src="@{jquery/jquery.min.js}"></script>
<script th:src="@{js/search.js}" type="text/javascript"></script>
<script type="text/javascript">
    function searchProducts(name, value) {
        location.href = replaceOrAddParamVal(location.href, name, value, true);
    }

    // function searchByKeyword() {
    //     searchProducts("keyword", $("#keyword_input").val());
    // }

    $(".page_a").click(function () {
        let pn = $(this).attr("pn");
        let href = location.href;
        // if (href.indexOf("pageNum") !== -1) {
        //     // 替换pageNum的值
        //
        // }
        return location.href = replaceOrAddParamVal(href, "pageNum", pn, false);
    })

    $(".page_submit").click(function () {
        let page = $("#toPage").val();
        if (page < 1) {
            return false;
        }
        location.href = replaceOrAddParamVal(location.href, "pageNum", page, false);
    })

    function replaceOrAddParamVal(url, paramName, replaceVal, forceAdd) {
        let oUrl = url.toString();
        // 如果没有就添加，有就替换
        if (oUrl.indexOf(paramName) !== -1) {
            if (forceAdd) {
                let nUrl;
                if (oUrl.indexOf("?") !== -1) {
                    nUrl = oUrl + "&" + paramName + "=" + replaceVal;
                } else {
                    nUrl = oUrl + "?" + paramName + "=" + replaceVal;

                }
                return nUrl;
            } else {
                let re = eval('/(' + paramName + '=)([^&]*)/gi');
                return oUrl.replace(re, paramName + '=' + replaceVal);
            }

        } else {
            let nUrl;
            if (oUrl.indexOf("?") !== -1) {
                nUrl = oUrl + "&" + paramName + "=" + replaceVal;
            } else {
                nUrl = oUrl + "?" + paramName + "=" + replaceVal;
            }
            return nUrl;
        }

    }

    $(".sort_a").click(function () {
        // toggleClass方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。
        $(this).toggleClass("desc");
        // 跳转到指定位置
        let sort = $(this).attr("sort");
        // 由于默认没有带任何参数，所以
        sort = $(this).hasClass("desc") ? sort + "_desc" : sort + "_asc";
        location.href = replaceOrAddParamVal(location.href, "sort", sort, false);

        // 禁止默认行为
        return false;
    })

    $("#rangeBtn").click(function () {
        // 拼接价格区间
        let range = $("#priceFrom").val() + "_" + $("#priceTo").val();
        location.href = replaceOrAddParamVal(location.href, "skuPrice", range, false);
    })

    $("#hasStock").change(function () {
        if ($(this).prop('checked')) {
            location.href = replaceOrAddParamVal(location.href, "hasStock", 1, false);
        } else {
            let re = eval('/(hasStock=)([^&]*)/gi');
            location.href = (location.href + '').replace(re, '');
        }
        return false;
    })
</script>
</body>
</html>
